<template>
  <div style="margin-top: 10px">
    <el-backtop :bottom="100">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }
        "
      >
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Questionnaire Detail</span>
          <el-col
            :span="4"
            :offset="16"
            style="text-align: end; padding-right: 5px"
          >
            <el-button
              icon="el-icon-download"
              @click="downloadImg('main', '个人信息')"
              >Export</el-button
            >
            <el-button
              icon="el-icon-s-unfold"
              type="success"
              @click="returnTo()"
              >Return</el-button
            >
          </el-col>
        </div>
      </template>
      <div ref="main">
        <el-row>
          <el-col :span="11">
            <el-descriptions title="个人因素" :column="1" border>
              <el-descriptions-item
                label="姓名"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ form1.name }}</el-descriptions-item
              >
              <el-descriptions-item
                label="出生日期"
                :contentStyle="{ width: '50%' }"
                >{{ form1.birthDate }}
              </el-descriptions-item>
              <el-descriptions-item label="年龄">{{
                form1.age
              }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{
                form1.sex
              }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{
                form1.nation
              }}</el-descriptions-item>
              <el-descriptions-item label="省份">{{
                form1.province
              }}</el-descriptions-item>
              <el-descriptions-item label="身高">{{
                form1.height
              }}</el-descriptions-item>
              <el-descriptions-item label="体重">{{
                form1.weight
              }}</el-descriptions-item>
              <el-descriptions-item label="BMI">{{
                form1.bmi
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="11">
            <el-descriptions title="生理因素" :column="1" border>
              <el-descriptions-item
                label="您月经初潮的年龄"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ form2.menarcheAge }}</el-descriptions-item
              >
              <el-descriptions-item
                label="您生育过几个孩子"
                :contentStyle="{ width: '50%' }"
                >{{ form2.hasChildren }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="form2.hasChildren != '0'"
                label="您生育头胎时几岁"
                >{{ form2.firstChildAge }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="form2.hasChildren != '0'"
                label="您母乳喂养的累积时间为多少个月"
                >{{ form2.breastMilkMouth }}
              </el-descriptions-item>
              <el-descriptions-item label="您经历绝经了吗">{{
                form2.isMenopause
              }}</el-descriptions-item>
              <el-descriptions-item
                v-if="form2.isMenopause == '已绝经'"
                label="绝经年龄"
                >{{ form2.menopauseAge }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="11">
            <el-descriptions title="个人健康信息" :column="1" border>
              <el-descriptions-item
                label="您是否服用口服避孕药"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ form4.isAcyeterion }}</el-descriptions-item
              >
              <el-descriptions-item
                label="您是否使用过激素替代疗法"
                :contentStyle="{ width: '50%' }"
                >{{ form4.isHormoneTherapy }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="form4.isHormoneTherapy != '从未服用'"
                label="请说明使用激素替代疗法的原因"
                >{{ form4.hormoneTherapyReason }}</el-descriptions-item
              >
              <el-descriptions-item label="您是否接受过胸部放疗">{{
                form4.isChestRadiotherapy
              }}</el-descriptions-item>
              <el-descriptions-item
                v-if="form4.isChestRadiotherapy != '否'"
                label="请说明接受胸部放疗的原因"
                >{{ form4.chestRadiotherapyReason }}</el-descriptions-item
              >
              <el-descriptions-item
                v-if="form4.isChestRadiotherapy != '否'"
                label="请说明接受胸部放疗的年龄"
                >{{ form4.chestRadiotherapyAge }}</el-descriptions-item
              >
              <el-descriptions-item
                label="您是否曾在钼靶检查中被医生告知'乳腺组织致密'"
                >{{ form4.isDenseBreastTissue }}
              </el-descriptions-item>
              <el-descriptions-item label="您是否接受过乳腺活检">{{
                form4.breastBiopsyCount
              }}</el-descriptions-item>
              <el-descriptions-item
                v-if="form4.breastBiopsyCount != '从未活检'"
                label="您的乳腺活检结果是"
                >{{ form4.breastBiopsyResult }}</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
          <el-col :span="11">
            <el-descriptions title="生活习惯" :column="1" border>
              <el-descriptions-item
                label="您吸烟吗"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ form3.smoke }}</el-descriptions-item
              >
              <el-descriptions-item
                v-if="form3.smoke != '从不'"
                label="您烟龄有多长"
                >{{ form3.smokeTime }}
              </el-descriptions-item>
              <el-descriptions-item
                label="您平均每周有几天会被动吸烟(被动吸烟指暴露在烟雾中15分钟)"
                :contentStyle="{ width: '50%' }"
              >
                {{ form3.smokePerWeek }}
              </el-descriptions-item>
              <el-descriptions-item label="您饮酒吗">{{
                form3.drink
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <div style="font-size: 18px; font-weight: 550; margin-right: 91%">
            个人及家族病史
          </div>
          <br />
          <el-col :span="11" v-for="item in form5Array" :key="item.id">
            <el-descriptions :column="1" border :title="item.familyValue">
              <el-descriptions-item
                label="您或家族成员罹患过肿瘤吗"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ item.familyValue }}</el-descriptions-item
              >
              <el-descriptions-item
                label="肿瘤类型"
                :contentStyle="{ width: '50%' }"
                >{{ item.tumorType }}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button
                  v-if="item.tumorType == '乳腺癌'"
                  size="mini"
                  type="success"
                  @click="seeFamily(item.id)"
                >
                  查看病例检查报告</el-button
                >
              </el-descriptions-item>
              <el-descriptions-item
                v-if="item.tumorType == '其他'"
                label="注明疾病"
                >{{ item.ortherTumorType }}
              </el-descriptions-item>
              <el-descriptions-item label="当前或死亡时年龄"
                >{{ item.currentOrDeathAge }}
              </el-descriptions-item>
              <el-descriptions-item label="诊断年龄"
                >{{ item.diagnosisAge }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="item.tumorType == '乳腺癌'"
                label="是否三阴性乳腺癌"
                >{{ item.isThree }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="item.tumorType == '乳腺癌'"
                label="乳腺癌原发病灶的数量"
                >{{ item.breastCancerNum }}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="item.tumorType == '乳腺癌'"
                label="乳腺癌原发病灶是否在双侧"
                >{{ item.isBothSides }}
              </el-descriptions-item>
              <br />
            </el-descriptions>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <div style="font-size: 18px; font-weight: 550; margin-right: 94%">
            基因检测
          </div>
          <br />
          <el-col :span="11" v-for="item in form6Array" :key="item.id">
            <el-descriptions :column="1" border :title="item.familyValue">
              <el-descriptions-item
                label="您或家族成员做过基因检测,并被证实携带基因变异吗"
                :labelStyle="{ background: '#E1F3D8' }"
                :contentStyle="{ background: '#FDE2E2' }"
                >{{ item.isGeneDetection }}
              </el-descriptions-item>
              <el-descriptions-item
                label="受检者身份"
                :contentStyle="{ width: '50%' }"
                >{{ item.familyValue }}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button
                  size="mini"
                  type="success"
                  @click="seeFamily(item.id)"
                  >查看基因检查报告</el-button
                >
              </el-descriptions-item>
              <el-descriptions-item label="样本类型"
                >{{ item.sampleType }}
              </el-descriptions-item>
              <el-descriptions-item label="检测的基因"
                >{{ item.detectedGenes }}
              </el-descriptions-item>
              <el-descriptions-item label="变异类型"
                >{{ item.variationType }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <div style="font-size: 18px; font-weight: 550; margin-right: 94%">
            预测结果
          </div>
          <br />
          <div>
            <el-card class="result-card">
              <el-row>
                <el-col :span="12">
                  <div v-if="model == 'Claus'">
                    您的乳腺癌终身发病率为 : {{ result }}
                  </div>
                  <div v-if="model == 'Gail'">
                    您的乳腺癌五年内发病率为 : {{ result }}
                  </div>
                  <br />
                  <div>
                    女性在{{ form1.age }}岁时乳腺癌发病率平均水平为 :
                    {{ average }}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button
                      type="primary"
                      size="mini"
                      @click="riskInDifferentAge"
                      >点击查看各个年龄段发病率平均水平</el-button
                    >
                  </div>
                  <el-divider></el-divider>
                  <div style="font-size: 18px; font-weight: 550">说明：</div>
                  <br />
                  <p v-if="model == 'Gail'">
                    根据所提供的信息(见上图),该女性在未来5年内患浸润性乳腺癌的估计风险为{{
                      result
                    }},相比之下
                    中国普通人群中相同年龄和民族的女性患浸润性乳腺癌的风险为{{
                      average
                    }}。这一计算也意味着女性在未来5年内不会患乳腺癌的风险是{{
                      notRisk
                    }}
                  </p>
                  <p v-if="model == 'Claus'">
                    根据所提供的信息(见上图),该妇女的估计风险为一生中(至90岁)患浸润性乳腺癌的比例为{{
                      result
                    }},相比之下
                    中国普通人群中相同年龄和民族的女性患浸润性乳腺癌的风险为{{
                      average
                    }}。这一计算也意味着女性一生中(至90岁)不会患乳腺癌的风险是{{
                      notRisk
                    }}
                  </p>
                </el-col>
                <el-col :span="8">
                  <div style="font-size: 18px; font-weight: 550">
                    遗传咨询师建议：
                  </div>
                  <br />
                  <p>{{ adviseText }}</p>
                  <br />
                  <span class="wechat"
                    >如有疑问！您可扫描右方微信二维码与遗传咨询师联系，谢谢！</span
                  >
                </el-col>
                <el-col :span="4">
                  <div>杨一：</div>
                  <div>
                    <img src="@/assets/img/WeChart.jpg" class="image" />
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-row>
      </div>
    </el-card>
    <br />
    <el-card class="box-card2">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Result Analysis</span>
          <el-col
            :span="4"
            :offset="16"
            style="text-align: end; padding-right: 5px"
          >
            <el-button
              icon="el-icon-download"
              @click="downloadImg('result', '结果分析')"
              >Export</el-button
            >
          </el-col>
        </div>
      </template>
      <div ref="result">
        <el-row>
          <el-col :span="10" class="colorChart">
            <QuestionDetailAnalysisVue></QuestionDetailAnalysisVue>
          </el-col>
          <el-col :span="14">
            <div style="font-size: 18px; font-weight: 550">解释说明:</div>
            <br />
            <div style="font-size: 16px; font-weight: 550">年龄:</div>
            <p>
              随着年龄增加风险增大，七十岁达到顶峰，详情请看上表。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button type="primary" size="mini" @click="riskInDifferentAge"
                >点击查看各个年龄段发病率平均水平</el-button
              >
            </p>
            <br />
            <div style="font-size: 16px; font-weight: 550">初潮年龄:</div>
            <p>
              较早初潮是乳腺癌发病的重要危险因素。如果初潮年龄小于13岁，其发病率是初潮年龄为17岁人群的2.2倍。
            </p>
            <br />
            <div style="font-size: 16px; font-weight: 550">头胎年龄:</div>
            <p>
              未生育患乳腺癌概率高2.5倍、初产年龄大高于35岁患乳腺癌概率高两倍多。
            </p>
            <br />
            <div style="font-size: 16px; font-weight: 550">绝经年龄:</div>
            <p>
              绝经年龄越早，乳腺癌发病风险越低，大于55岁者乳腺癌的发生风险是45岁以前绝经者的1.22倍。
            </p>
            <br />
            <div style="font-size: 16px; font-weight: 550">烟龄:</div>
            <p>
              吸烟的和有10年及以上烟龄每天一包烟的年轻女性患雌激素受体阳性乳腺癌的增加风险有60%。
            </p>
            <el-divider></el-divider>
            <div style="font-size: 18px; font-weight: 550">结论：</div>
            <br />
            <p>综合来看，您的五项指标均在正常范围内。</p>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />
    <el-dialog
      title="2021年各年龄段乳腺癌发病率平均水平"
      :visible.sync="dialogVisible"
      class="dialogStyle"
      width="1600px"
    >
      <div>
        <RiskInDifferentAge></RiskInDifferentAge>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RiskInDifferentAge from "@/views/QuestionnaireManagement/RiskInDifferentAge.vue";
import QuestionDetailAnalysisVue from "@/views/QuestionnaireManagement/QuestionDetailAnalysis.vue";
import html2canvas from "html2canvas";
export default {
  components: {
    RiskInDifferentAge,
    QuestionDetailAnalysisVue,
  },
  data() {
    return {
      dialogVisible: false,
      model: "Gail",
      result: "5.7%",
      average: "0.5%",
      notRisk: "99.5%",
      adviseText:
        "根据您提供的信息，建议您即时前往就近医院做乳腺检测，保持日常运动，避免久坐与接受雌激素替代治疗，远离烟草，多吃豆制品与果蔬，严格控制体重。",
      form1: {
        name: "张三",
        birthDate: "1970-04-15",
        age: "52",
        sex: "女",
        nation: "汉族",
        height: "165cm",
        weight: "54kg",
        province: "陕西省",
        bmi: "???",
      },
      form2: {
        menarcheAge: "16",
        hasChildren: "1",
        firstChildAge: "22",
        breastMilkMouth: "9",
        isMenopause: "已绝经",
        menopauseAge: "48",
      },
      form3: {
        smoke: "从不",
        smokeTime: "",
        smokePerWeek: "没有",
        drink: "从不",
      },
      form4: {
        isAcyeterion: "从未服用",
        isHormoneTherapy: "从未服用",
        hormoneTherapyReason: "",
        isChestRadiotherapy: "否",
        chestRadiotherapyReason: "",
        chestRadiotherapyAge: "",
        isDenseBreastTissue: "否",
        breastBiopsyCount: "一次活检",
        breastBiopsyResult: "导管增生，纤维腺瘤",
      },
      form5: {
        familyValue: "",
        tumorType: "",
        ortherTumorType: "",
        currentOrDeathAge: "",
        diagnosisAge: "",
        isThree: "",
        breastCancerNum: "",
        isBothSides: "",
      },
      form5Array: [
        {
          familyValue: "祖母",
          tumorType: "乳腺癌",
          ortherTumorType: "",
          currentOrDeathAge: "92",
          diagnosisAge: "58",
          isThree: "否",
          breastCancerNum: "3",
          isBothSides: "否",
        },
        {
          familyValue: "婶婶",
          tumorType: "其他",
          ortherTumorType: "肺癌",
          currentOrDeathAge: "62",
          diagnosisAge: "55",
          isThree: "",
          breastCancerNum: "",
          isBothSides: "",
        },
      ],
      form6: {
        isGeneDetection: "",
        familyValue: "",
        sampleType: [],
        detectedGenes: "",
        variationType: [],
      },
      form6Array: [
        {
          isGeneDetection: "是",
          familyValue: "堂妹",
          sampleType: "胚系",
          detectedGenes: "BCRA1",
          variationType: "良性变异",
        },
      ],
    };
  },
  methods: {
    riskInDifferentAge() {
      this.dialogVisible = true;
    },
    seeFamily(id) {
      console.log("id", id);
    },
    returnTo() {
      window.history.back();
    },
    downloadImg(DivID, title) {
      html2canvas(this.$refs[DivID]).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var a = document.createElement("a");
          a.download = title;
          a.href = dataURL;
          a.click();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
p {
  text-indent: 2em;
  line-height: 30px;
}

.dialogStyle {
  height: 120%;
}

.image {
  width: 90%;
  height: 90%;
  margin: 5px auto;
}

.wechat {
  color: rgba(13, 125, 253, 0.863);
  font-size: 16px;
  font-weight: 550;
}

.box-card {
  width: 1530px;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}

.box-card2 {
  border-radius: 8px;
  width: 1530px;
  height: 620px;
  margin: 5px auto;
  background: rgba(148, 185, 228, 0.062);
}

.result-card {
  margin: auto;
  border-radius: 8px;
  text-align: left;
}

.colorChart {
  border-radius: 25px;
  background: rgba(148, 185, 228, 0.062);
}

.card-header {
  height: 35px;
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-card-title {
  font-size: 16px;
  font-weight: 600;
}

.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}

.el-col {
  border: 12px solid transparent;
}
</style>